<template>
  <div class="basic-settings">
    <h3>系统基本设置</h3>
    
    <el-form :model="settingsForm" label-width="180px" class="settings-form">
      <el-form-item label="系统名称">
        <el-input v-model="settingsForm.systemName" placeholder="系统名称"></el-input>
      </el-form-item>
      
      <el-form-item label="系统描述">
        <el-input 
          v-model="settingsForm.systemDescription" 
          type="textarea" 
          rows="3" 
          placeholder="系统描述"
        ></el-input>
      </el-form-item>
      
      <el-form-item label="管理员邮箱">
        <el-input v-model="settingsForm.adminEmail" placeholder="管理员邮箱"></el-input>
      </el-form-item>
      
      <el-form-item label="是否允许注册">
        <el-switch v-model="settingsForm.allowRegistration"></el-switch>
      </el-form-item>
      
      <el-form-item label="新用户默认权限">
        <el-radio-group v-model="settingsForm.defaultRole">
          <el-radio label="reader">只读用户</el-radio>
          <el-radio label="contributor">贡献者</el-radio>
          <el-radio label="editor">编辑者</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="开启维护模式">
        <el-switch v-model="settingsForm.maintenanceMode"></el-switch>
      </el-form-item>
      
      <el-form-item label="每页显示记录数">
        <el-input-number v-model="settingsForm.pageSize" :min="5" :max="100"></el-input-number>
      </el-form-item>
      
      <el-form-item label="上传文件大小限制(MB)">
        <el-input-number v-model="settingsForm.uploadLimit" :min="1" :max="100"></el-input-number>
      </el-form-item>
      
      <el-form-item label="允许的文件类型">
        <el-select v-model="settingsForm.allowedFileTypes" multiple placeholder="请选择">
          <el-option label="PDF文档 (.pdf)" value="pdf"></el-option>
          <el-option label="Word文档 (.docx)" value="docx"></el-option>
          <el-option label="Excel表格 (.xlsx)" value="xlsx"></el-option>
          <el-option label="图片文件 (.jpg, .png)" value="image"></el-option>
          <el-option label="文本文件 (.txt)" value="txt"></el-option>
          <el-option label="Markdown文件 (.md)" value="md"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="系统Logo">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :limit="1"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="saveSettings" :loading="saving">保存设置</el-button>
        <el-button @click="resetSettings">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const saving = ref(false)

// 设置表单
const settingsForm = reactive({
  systemName: '文档订阅系统',
  systemDescription: '为用户提供文档的订阅、推送和管理服务',
  adminEmail: 'admin@example.com',
  allowRegistration: true,
  defaultRole: 'reader',
  maintenanceMode: false,
  pageSize: 20,
  uploadLimit: 20,
  allowedFileTypes: ['pdf', 'docx', 'image', 'txt', 'md']
})

// 初始设置
const initialSettings = { ...settingsForm }

// 初始化
onMounted(async () => {
  await fetchSettings()
})

// 获取系统设置
async function fetchSettings() {
  try {
    // 这里替换为实际的API调用
    // const response = await axios.get('/api/admin/settings/basic')
    // Object.assign(settingsForm, response.data)
    
    // 模拟加载设置
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 保存初始设置（用于重置功能）
    Object.assign(initialSettings, settingsForm)
  } catch (error) {
    console.error('Failed to fetch settings:', error)
    ElMessage.error('加载设置失败')
  }
}

// 保存设置
async function saveSettings() {
  saving.value = true
  try {
    // 这里替换为实际的API调用
    // await axios.put('/api/admin/settings/basic', settingsForm)
    
    // 模拟保存
    await new Promise(resolve => setTimeout(resolve, 800))
    
    ElMessage.success('设置保存成功')
    
    // 更新初始设置
    Object.assign(initialSettings, settingsForm)
  } catch (error) {
    console.error('Failed to save settings:', error)
    ElMessage.error('保存设置失败')
  } finally {
    saving.value = false
  }
}

// 重置设置
function resetSettings() {
  Object.assign(settingsForm, initialSettings)
  ElMessage.info('已重置为上次保存的设置')
}
</script>

<style scoped>
.basic-settings {
  padding: 10px;
}

h3 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.settings-form {
  max-width: 800px;
}
</style> 